#单点登录整合 ruoyi-vue

本文介绍如何将 RuoYi-Vue 系统与 PIGX 单点登录（SSO）集成，实现统一身份认证。集成后，用户可通过 PIGX 认证中心登录 RuoYi 系统，无需单独维护用户体系。

#环境说明

#认证流程

flowchart LR
    A[RuoYi前端<br/>1024端口] --> B[PIGX认证中心<br/>微服务 3000 / 单体 9999/admin]
    B --> C[返回授权码CODE]
    C --> D[RuoYi后台]
    D --> E[查询PIGX用户信息]
    E --> F[完成登录]

详细步骤说明：

1. RuoYi 前端跳转至 PIGX 认证中心登录页面
2. 用户在 PIGX 认证中心完成登录，回调返回授权码 CODE
3. RuoYi 前端携带 CODE 请求 RuoYi 后台
4. RuoYi 后台携带 CODE 向 PIGX 查询对应用户信息
5. PIGX 返回用户信息，RuoYi 完成鉴权并跳转

#快速开始

#步骤一：下载示例项目

git clone https://github.com/pig-mesh/RuoYi-Vue.git

#步骤二：配置 OAuth 客户端

INSERT INTO `sys_oauth_client_details`(
  `id`,
  `client_id`,
  `resource_ids`,
  `client_secret`,
  `scope`,
  `authorized_grant_types`,
  `web_server_redirect_uri`,
  `authorities`,
  `access_token_validity`,
  `refresh_token_validity`,
  `additional_information`,
  `autoapprove`,
  `del_flag`,
  `create_by`,
  `update_by`,
  `create_time`,
  `update_time`,
  `tenant_id`
) VALUES (
  100,
  'ruoyi',
  NULL,
  'ruoyi',
  'server',
  'authorization_code,client_credentials,password,implicit,refresh_token',
  'http://127.0.0.1:1024/sso',
  NULL,
  12700000,
  12700000,
  '{"captcha_flag":"0","enc_flag":"0","online_quantity":"1"}',
  'false',
  '0',
  'admin',
  'admin',
  '2023-01-17 11:12:49',
  '2023-01-28 10:32:58',
  1
);

关键字段说明：

#步骤三：修改 RuoYi 后端配置

在 RuoYi 后端配置文件中添加以下配置：

配置项说明：

• RuoYi 前端地址：默认 http://127.0.0.1:1024
• PIGX 认证中心地址按部署形态填写：

#步骤四：修改 RuoYi 前端配置

#4.1 配置登录页面跳转

修改 login.vue 文件，添加跳转至 PIGX 认证中心的逻辑：

// 跳转至 PIGX 认证中心
window.location.href = "http://127.0.0.1:3000/oauth2/authorize?client_id=ruoyi&response_type=code&scope=server&redirect_uri=http://127.0.0.1:1024/sso"

#4.2 配置退出登录逻辑

修改 navbar.vue 文件，添加退出登录跳转逻辑：

// 退出登录并跳转至 PIGX
location.href = 'http://127.0.0.1:3000/logout?redirect_url=http://127.0.0.1:1024/';

#进阶：代码改造详解

#改造一：新增 Spring Security 认证模式

创建基于授权码的自定义认证模式，需实现以下两个核心类：

#SsoCodeAuthenticationToken.java

用于封装授权码认证信息。

源码参考：SsoCodeAuthenticationToken.java

#SsoCodeAuthenticationProvider.java

实现授权码认证逻辑，调用 PIGX 接口验证授权码并获取用户信息。

源码参考：SsoCodeAuthenticationProvider.java

#改造二：配置 SecurityConfig

在 Spring Security 配置中注册自定义认证提供者：

关键代码：

// 注册自定义认证提供者
http.authenticationProvider(ssoCodeAuthenticationProvider);

#改造三：修改登录方法

调整登录控制器，支持授权码登录模式：

调用链路：

SysLoginController.login() -> SysLoginService.loginBySSO()

#改造四：前端页面调整

#4.1 新增 SSO 回调页面

创建 sso.vue 页面，用于接收 PIGX 认证中心的授权码回调。

源码参考：sso.vue

#4.2 配置路由

在 router/index.js 中添加 SSO 回调路由：

#4.3 设置路由白名单

在路由守卫中将 /sso 路径加入白名单，允许未登录访问：

#4.4 新增 SSO 登录 API

在 api/login.js 中添加 loginBySSO 方法：

#4.5 添加 SSO 登录按钮

在登录页面增加"单点登录"按钮：

#4.6 调整退出登录逻辑

修改退出登录方法，清除 PIGX 认证中心的会话：

#常见问题

#授权码回调失败

问题描述： PIGX 认证中心回调时报错 redirect_uri_mismatch

解决方案：

• 检查 sys_oauth_client_details 表中的 web_server_redirect_uri 字段是否与前端回调地址一致
• 确保回调地址可被 PIGX 服务访问（注意端口和协议）

#登录后无法获取用户信息

问题描述： 授权码验证成功，但 RuoYi 系统无法获取用户信息

解决方案：

• 检查 PIGX 的 sys_user 表中是否存在对应用户
• 确认 RuoYi 后端配置的 PIGX 服务地址正确
• 查看 RuoYi 后台日志，确认与 PIGX 的通信是否正常

#退出登录后仍可直接登录

问题描述： 点击退出登录后，再次访问系统无需输入密码

解决方案：

• 检查退出登录逻辑是否调用了对应版本的退出接口：

• 确认浏览器 Cookie 已被清除
• 验证 PIGX 认证中心的 Session 是否正常失效